<template>
  <div class="wrapper-add-edit">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ title }}</span>
        </div>
      </template>
      <el-card style="max-width: 500px; margin-bottom: 20px">
        <template #header>
          <div class="card-header">
            <span>责任科室</span>
          </div>
        </template>
        <el-tree-select
          v-model="departmentIds"
          :data="dataTSDepartment"
          :props="{ value: 'id', label: 'label' }"
          :render-after-expand="false"
          :current-node-key="0"
          :check-strictly="false"
          multiple
          show-checkbox
          value-key="id"
          placeholder="选择责任科室"
          check-on-click-node
        />
      </el-card>
      <el-card style="max-width: 500px; margin-bottom: 20px">
        <template #header>
          <div class="card-header">
            <span>责任领导</span>
          </div>
        </template>
        <el-checkbox
          v-model="flagCheckAllLeader"
          :indeterminate="flagIndeterminateLeader"
          @change="onCheckAllLeader"
          label="全选"
        />
        <el-checkbox-group v-model="checkedLeaderIds" @change="onLeaderCBLChange">
          <el-checkbox v-for="leader in allLeaders" :key="leader" :label="leader.realName" :value="leader.id" />
        </el-checkbox-group>
      </el-card>
      <el-card style="max-width: 500px">
        <template #header>
          <div class="card-header">
            <span>责任分工</span>
          </div>
        </template>
        <el-checkbox
          v-model="flagCheckAllStaff"
          :indeterminate="flagIndeterminateStaff"
          @change="onCheckAllStaff"
          label="全选"
        />
        <el-checkbox-group v-model="checkedStaffIds" @change="onStaffCBLChange">
          <el-checkbox v-for="staff in allStaffs" :key="staff" :label="staff.realName" :value="staff.id" />
        </el-checkbox-group>
      </el-card>
      <template #footer>
        <el-button type="primary" @click="onSubmit()">确定提交</el-button>
        <el-button @click="onBack2List()">取消并返回</el-button>
      </template>
    </el-card>
  </div>
</template>

<script>
import { L, map2Json } from '@/utils/common'
import { AryToTree } from '@/utils/array'
import { getLStorageObj, getSStorageObj } from '@/utils/web-storage'
import { toastSuccess, toastError } from '@/utils/toast'

import router from '@/router'
import store from '@/store'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'ListAllTaskDutyView',
  components: {},
  setup() {
    const title = ref('')
    const formData = ref({
      idTask: 0,
      paramJsonMap: null,
    })

    const departmentIds = ref([])
    const dataTSDepartment = ref([])

    const allLeaders = ref([])

    const flagCheckAllLeader = ref(false)
    const flagIndeterminateLeader = ref(false)
    const checkedLeaderIds = ref([])

    const allStaffs = ref([])
    const flagCheckAllStaff = ref(false)
    const flagIndeterminateStaff = ref(false)
    const checkedStaffIds = ref([])

    const onBack2List = () => {
      router.push({ path: 'list-page' })
    }

    // 如果是添加子任务，则从list-page传过来父任务的id
    const getQuery = () => {
      const task = getSStorageObj('ParamData')
      if (!task) onBack2List()
      title.value = task.article.title
      formData.value.idTask = task.id
    }

    // 获取所有管理员列表
    const listAllAdmin = () => {
      store
        .dispatch('sys_admin/listAll', 'task')
        .then((response) => {
          allLeaders.value = response.filter((item) => {
            return item.flagLeader === true
          })
          allStaffs.value = response.filter((item) => {
            return item.flagLeader === false
          })
        })
        .catch((error) => {
          console.log('读取人员列表数据出现错误：', error)
        })
    }
    // 得到卫健委下所有科室
    const listDepartment = () => {
      dataTSDepartment.value = AryToTree(getLStorageObj('AllCategory'), 106)
    }

    const onCheckAllLeader = (val) => {
      checkedLeaderIds.value = []
      const checked = val ? allLeaders.value : []
      checked.forEach((element) => {
        checkedLeaderIds.value.push(element.id)
      })
      flagIndeterminateLeader.value = false
    }
    const onLeaderCBLChange = (val) => {
      const checkedCount = val.length
      flagCheckAllLeader.value = checkedCount === allLeaders.value.length
      flagIndeterminateLeader.value = checkedCount > 0 && checkedCount < allLeaders.value.length
    }

    const onCheckAllStaff = (val) => {
      checkedStaffIds.value = []
      const checked = val ? allStaffs.value : []
      checked.forEach((element) => {
        checkedStaffIds.value.push(element.id)
      })
      flagIndeterminateStaff.value = false
    }
    const onStaffCBLChange = (val) => {
      const checkedCount = val.length
      flagCheckAllStaff.value = checkedCount === allStaffs.value.length
      flagIndeterminateStaff.value = checkedCount > 0 && checkedCount < allStaffs.value.length
    }

    const onSubmit = () => {
      L('checkedLeaderIds', checkedLeaderIds.value)
      L('checkedStaffIds', checkedStaffIds.value)
      L('departmentIds', departmentIds.value)
      const map = new Map()
      map.set('Leader', checkedLeaderIds.value.toString())
      map.set('Stuff', checkedStaffIds.value.toString())
      map.set('Department', departmentIds.value.toString())
      formData.value.paramJsonMap = map2Json(map)
      L('formData.value', formData.value)
      store
        .dispatch('task_duty/add', formData.value)
        .then(() => {
          toastSuccess('添加成功！')
        })
        .catch((error) => {
          toastError(error)
        })
    }

    onMounted(() => {
      getQuery()
      listAllAdmin()
      listDepartment()
    })

    return {
      formData,
      departmentIds,

      title,
      allLeaders,
      allStaffs,
      flagCheckAllLeader,
      flagIndeterminateLeader,
      checkedLeaderIds,
      dataTSDepartment,
      flagCheckAllStaff,
      flagIndeterminateStaff,
      checkedStaffIds,

      onBack2List,
      getQuery,
      listAllAdmin,
      listDepartment,
      onCheckAllLeader,
      onLeaderCBLChange,
      onCheckAllStaff,
      onStaffCBLChange,
      onSubmit,
    }
  },
})
</script>

<style lang="scss" scoped></style>
